<!--
 *@FileDescription:地图应用
 *@author: linwenjie
 *@date: 2021-12-07 15:14:51
-->
<template>
<div id="mapView"></div>
</template>

<script>
// 例如:import 《组件名称》 from '《组件路径》';
import { recentFacilityMarker, companyArray } from './mock'
import L from 'leaflet'
import * as SuperMap from '@supermap/iclient-leaflet'
import mixinsData from './mixinsData'
import mixinsLngLatChange from './mixinsLngLatChange'
import { mapGetters } from 'vuex'
import callImage from '@/assets/image/home/phone_call_small.png'
export default {
  // import引入的组件需要注入到对象中才能使用
  mixins: [mixinsData, mixinsLngLatChange],
  props: {
    mode: {
      default: 0,
      type: Number
    }
  },
  components: {},
  data () {
    // 这里存放数据
    return {
      people: {},
      // 企业列表
      searchFormCompany: {},
      // 地图轮廓
      outlineUrl:
        this.$BASE_URL +
        '/iserver/services/map-peizhun/rest/maps/屏山县用地布P_adjust@处理后的数据',
      outline: {},
      // 卫星图
      satelliteUrl:
        this.$BASE_URL +
        '/iserver/services/map-peizhun/rest/maps/pingshan@卫星数据?prjCoordSys=%7B"epsgCode":4326%7D',
      satellite: {},
      smallCallImage: callImage,
      // 地图轮廓边线
      sidelineUrl:
        this.$BASE_URL +
        '/iserver/services/map-peizhun/rest/maps/草地?prjCoordSys=%7B"epsgCode":4326%7D',
      sideline: {},
      // 打印服务
      printingJobUrl: this.$BASE_URL + '/iserver/services/webprinting/rest/webprinting/v1',
      // 最近的设施分析
      recentFacilityUrl:
        this.$BASE_URL +
        '/iserver/services/transportationAnalyst-peizhun/rest/networkanalyst/%E7%BD%91%E7%BB%9C%E5%88%86%E6%9E%90%E5%9B%BE@%E5%A4%84%E7%90%86%E5%90%8E%E7%9A%84%E6%95%B0%E6%8D%AE',
      featuresBySQLUrl: this.$BASE_URL + '/iserver/services/data-peizhun/rest/data',
      boundary: null, // 点击的边界
      popupSQL: null, // 场界提示文字
      // 当前点击的XY坐标
      currentClickXY: [0, 0],
      userId: '',
      // 应急事件范围圆圈和坐标
      circle: null,
      accident: null,
      polyline: null,
      popup: null,
      // 水波纹
      circleWaterLine: null,
      waterLineRadius: 0,
      // 叠加分析临时数据
      overlayAnalysisData: {
        circle: null,
        polyline: null,
        popup: null
      },
      // 资源分析
      tempResourceList: [],
      equipmentTypeList: { 0: '机械化装备', 1: '硬件类型', 2: '其他设备' },
      proTypeList: {
        0: '地理专家',
        1: '运输专家',
        2: '火灾专家',
        3: '化学',
        4: '消防',
        5: '防灭火',
        6: '电力安全',
        7: '土木工程',
        9: '岩土工程',
        10: '建筑工程',
        11: '市政工程',
        12: '燃气工程',
        13: '信息工程'
      },
      supplyTypeList: {
        0: '应急处置装备',
        1: '能源物资',
        2: '救灾物资',
        3: '生活必需品',
        4: '医疗救护装备',
        5: '其他物资',
        6: '消防装备',
        7: '个体防护装备',
        8: '医疗物资'
      },
      typeList: {
        0: '抢险救援机构',
        1: '医疗救援机构',
        2: '物资保障机构'
      },
      cartTypeList: {
        0: '火车',
        1: '货车',
        2: '大型货车',
        4: '乘用车',
        5: '救护车',
        6: '消防车',
        7: '工程车辆',
        9: '其他'
      }
    }
  },
  // 监听属性 类似于data概念
  // computed: {
  //   ...mapGetters(['currentItem', 'currentPage'])
  // },
  // 监控data中的数据变化
  // watch: {
  //   currentPage (newValue) {
  //     console.log(newValue)
  //     if (newValue == 'watchPage' || newValue == 'handlePage') {
  //       this.clearMap()
  //     } else {
  //       console.log(this.currentItem)
  //       const temp = this.gcj02towgs84(Number(104.33875), Number(28.86054))
  //       console.log(temp)
  //       this.currentLngLat = [temp[1], temp[0]]
  //       // 设置事故发生点
  //       this.$nextTick(() => {
  //         this.setAccident()
  //       })
  //     }
  //   }
  // },
  // 方法集合
  methods: {
    urlChange () {
      // if (window.location.host.indexOf('112.19.95.219') > -1) {
      // // 判断是外网地址的话，就请求外网后端接口地址
      //
      // } else {
      // // 判断是内网地址的话，就请求内网后端接口地址
      //   var b = ''
      //   b = 'http://172.16.2.2:8004'
      //   this.outlineUrl = b + '/iserver/services/map-peizhun/rest/maps/屏山县用地布P_adjust@处理后的数据'
      //   this.satelliteUrl = b + '/iserver/services/map-peizhun/rest/maps/pingshan@卫星数据?prjCoordSys=%7B"epsgCode":4326%7D'
      //   this.sidelineUrl = b + '/iserver/services/map-peizhun/rest/maps/草地'
      //   this.printingJobUrl = b + '/iserver/services/webprinting/rest/webprinting/v1'
      //   this.recentFacilityUrl = b + '/iserver/services/transportationAnalyst-peizhun/rest/networkanalyst/%E7%BD%91%E7%BB%9C%E5%88%86%E6%9E%90%E5%9B%BE@%E5%A4%84%E7%90%86%E5%90%8E%E7%9A%84%E6%95%B0%E6%8D%AE'
      //   this.featuresBySQLUrl = b + '/iserver/services/data-peizhun/rest/data'
      // }
      let a = ''
      a = 'http://112.19.95.219:8004'
      this.outlineUrl =
        a + '/iserver/services/map-peizhun/rest/maps/屏山县用地布P_adjust@处理后的数据'
      this.satelliteUrl =
        a +
        '/iserver/services/map-peizhun/rest/maps/pingshan@卫星数据?prjCoordSys=%7B"epsgCode":4326%7D'
      this.sidelineUrl = a + '/iserver/services/map-peizhun/rest/maps/草地'
      this.printingJobUrl = a + '/iserver/services/webprinting/rest/webprinting/v1'
      this.recentFacilityUrl =
        a +
        '/iserver/services/transportationAnalyst-peizhun/rest/networkanalyst/%E7%BD%91%E7%BB%9C%E5%88%86%E6%9E%90%E5%9B%BE@%E5%A4%84%E7%90%86%E5%90%8E%E7%9A%84%E6%95%B0%E6%8D%AE'
      this.featuresBySQLUrl = a + '/iserver/services/data-peizhun/rest/data'
    },
    // 初始化天地图
    initSuperMap () {
      this.map = L.map('mapView', {
        // crs: L.CRS.TianDiTu_Mercator,
        crs: L.CRS.EPSG4326,
        // crs: L.CRS.TianDiTu_WGS84,
        center: [28.859248624572754, 104.32995842529297],
        zoom: 14
      })
      this.map.invalidateSize(true)
      this.initMapByTdtType()

      this.commonIcon = L.icon({
        iconUrl: this.commonIconUrl,
        iconSize: [32, 32],
        iconAnchor: [16, 32]
      })

      this.commonIconRed = L.icon({
        iconUrl: this.commonIconRedUrl,
        iconSize: [32, 32],
        iconAnchor: [16, 32]
      })
      // 设置打点
      //   this.setMarkerList()

      // 设置点击事件
      this.setHandleClick()
    },
    // 设置事故发生点
    setAccident () {
      this.clearMap()
      this.map.flyTo(this.currentLngLat, 15)
      const myIcon = L.icon({
        iconUrl: this.markerIcon,
        iconSize: [32, 32],
        iconAnchor: [16, 32]
      })

      this.accident = L.marker(this.currentLngLat, {
        icon: myIcon
      })
      console.log(this.accident)
      this.accident.addTo(this.map)
      this.accident.on('click', () => {
        this.popupSQL = L.popup({
          closeOnClick: false
        })
          .setLatLng(this.currentLngLat)
          .setContent(
            `
                    <div>
                      <p>报警时间:${this.currentItem.createTime}</p>
                      <p>报警地点:${this.currentItem.eventArea}</p>
                      <p>报警描述:${this.currentItem.eventDes}</p>
                    </div>`
          )
          .openOn(this.map)
      })

      // 矢量图画圆形 半径300米
      this.circle = L.circle(this.currentLngLat, { radius: 300 })
      // .bindTooltip(this.currentItem.eventArea)
      // .openTooltip()
      this.circle.addTo(this.map)
      // 0.003+0.003 搜索300米半径

      const { lat, lng } = this.getLonAndLat(this.currentLngLat[1], this.currentLngLat[0], 45, 300)
      const lnglat = [lat, lng]
      this.polyline = L.polyline([this.currentLngLat, lnglat], {
        color: '#3388ff',
        weight: 2,
        opacity: 0.8,
        dashArray: '15'
      }).addTo(this.map)
      this.popup = L.popup({
        closeOnClick: false,
        className: 'XXXXXX'
      })
        .setLatLng(lnglat)
        .setContent('300.00m')
        .openOn(this.map)
      this.setWaterLine()
    },
    // 设置水波纹
    setWaterLine () {
      // 矢量图画圆形水波纹 半径300米
      this.circleWaterLine && this.circleWaterLine.removeFrom(this.map)
      this.circleWaterLine = L.circle(this.currentLngLat, {
        radius: this.waterLineRadius,
        fillColor: '#F56C6C',
        color: '#F56C6C',
        weight: 1,
        opacity: 0.8,
        fillOpacity: 0.6
      })
      this.circleWaterLine.addTo(this.map)
      this.waterLineRadius += 10
      if (this.waterLineRadius > 100) {
        this.waterLineRadius = 0
      }
      setTimeout(() => {
        this.currentPage !== 'watchPage' && this.setWaterLine()
      }, 100)
    },
    // 默认将三种类型天地图全部加载
    initMapByTdtType () {
      console.log('默认将三种类型天地图全部加载')
      Object.keys(this.tdtType).forEach((v) => {
        const options = {
          key: this.tdtKey
        }
        if (v !== 'ver') {
          Object.assign(options, {
            layerType: v
          })
        }
        this.tdtType[v] = L.supermap.tiandituTileLayer(options)
      })
      //   console.log(this.satelliteUrl)
      // 卫星
      this.satellite = L.supermap.tiledMapLayer(this.satelliteUrl, {
        transparent: true,
        opacity: 1
      })
      // 轮廓
      //   this.outline = L.supermap.tiledMapLayer(this.outlineUrl, {
      //     transparent: true,
      //     opacity: 1
      //   })
      this.sideline = L.supermap.tiledMapLayer(this.sidelineUrl, {
        transparent: true,
        opacity: 1
      })
      // 天地图文字
      //   this.lableType = L.supermap.tiandituTileLayer({
      //     isLabel: true,
      //     key: this.tdtKey
      //   })

      //   this.lableType.addTo(this.map)
      //   this.lableType.setZIndex(99)
      this.tdtType[this.currentTdtType].addTo(this.map)
      this.satellite.addTo(this.map)
      //   this.outline.addTo(this.map)
      // this.sideline.addTo(this.map)
    },
    // 设置点标记
    setMarkerList (list) {
      this.tempResourceList.forEach((item) => {
        item.removeFrom(this.map)
      })
      this.tempResourceList = []

      list.forEach((item, index) => {
        if (item.lng) {
          const array = this.gcj02towgs84(Number(item.lng), Number(item.lat))
          console.log('setMarkerList:', array)
          const temp = L.marker(array.reverse(), {
            title: item.label,
            icon: L.icon({
              iconUrl: item.image,
              iconSize: [24, 24],
              iconAnchor: [16, 24],
              clickable: true
            })
          }).addTo(this.map)
          this.tempResourceList.push(temp)
          temp.on('click', () => {
            console.log(item)
            let htmlContent = ''
            switch (item.currentType) {
              case 0:
                // 应急机构
                htmlContent = `
                    <div>
                     <p>机构名称:${item.name}</p>
                     <p>机构类型:${this.typeList[item.type]}</p>
                     <p>机构职责:${item.responsibility}</p>
                     <p>负责人:${item.headMan}</p>
                     <p>
                      联系电话:${item.tel}
                      <img src="${this.smallCallImage}" style="width: 10px;" alt="" id="${
                  item.id + '_' + item.currentType
                }">
                      </p>
                    </div>`
                break
              case 1:
                // 应急专家
                htmlContent = `
                    <div>
                     <p>姓名:${item.expertName}</p>
                     <p>专业类别:${this.proTypeList[item.proType]}</p>
                     <p>所属单位:${item.belongOrg}</p>
                     <p>
                      联系电话:${item.tel}
                      <img src="${this.smallCallImage}" style="width: 10px;" alt="" id="${
                  item.id + '_' + item.currentType
                }">
                      </p>
                    </div>`
                break
              case 2:
                // 应急队伍
                htmlContent = `
                    <div>
                     <p>队伍名称:${item.teamName}</p>
                     <p>应急专长:${item.emeFeat}</p>
                     <p>队伍情况:${item.situation}</p>
                     <p>负责人:${item.principal}</p>
                     <p>
                      联系电话:${item.tel}
                      <img src="${this.smallCallImage}" style="width: 10px;" alt="" id="${
                  item.id + '_' + item.currentType
                }">
                      </p>
                    </div>`
                break
              case 3:
                // 应急物资
                htmlContent = `
                    <div>
                     <p>物资类型:${this.supplyTypeList[item.supplyType]}</p>
                     <p>物资名称:${item.supplyName}</p>
                     <p>所属单位:${item.supplyUnit}</p>
                     <p>物资数量:${item.supplyNum}</p>
                     <p>联系人:${item.contactName}</p>
                     <p>
                      联系电话:${item.tel}
                      <img src="${this.smallCallImage}" style="width: 10px;" alt="" id="${
                  item.id + '_' + item.currentType
                }">
                      </p>
                    </div>`
                break
              case 4:
                // 应急设备
                htmlContent = `
                    <div>
                     <p>设备类型:${this.equipmentTypeList[item.equipmentType]}</p>
                     <p>设备名称:${item.equipmentName}</p>
                     <p>所属单位:${item.equipmentUnit}</p>
                     <p>设备数量:${item.equipmentNum}</p>
                     <p>联系人:${item.contactName}</p>
                     <p>
                      联系电话:${item.tel}
                      <img src="${this.smallCallImage}" style="width: 10px;" alt="" id="${
                  item.id + '_' + item.currentType
                }">
                      </p>
                    </div>`
                break
              case 5:
                // 应急交通工具
                htmlContent = `
                    <div>

                     <p>车辆名称:${item.name}</p>
                     <p>车牌号:${item.plateNum}</p>
                     <p>车辆类型:${this.cartTypeList[item.type]}</p>
                     <p>负责人:${item.principalName}</p>
                     <p>
                      联系电话:${item.tel}
                      <img src="${this.smallCallImage}" style="width: 10px;" alt="" id="${
                  item.id + '_' + item.currentType
                }">
                      </p>
                    </div>`
                break
              case 6:
                // 视频监控
                htmlContent = `
                    <div>
                     <p>监控设备名称:${item.equipmentName}</p>
                     <p>监控设备类型:${item.equipmentType}</p>
                     <p>所属单位:${item.affiliatedUnitName}</p>
                     <p style="color:#31B9F7;cursor: pointer;" id="${
                       item.id + '_' + item.currentType
                     }">查看视频</p>
                    </div>`
                break
            }
            L.popup({
              closeOnClick: false
            })
              .setLatLng([temp.getLatLng().lat + 0.00002, temp.getLatLng().lng + 0.00002])
              .setContent(htmlContent)
              .openOn(this.map)
            document
              .getElementById(item.id + '_' + item.currentType)
              .addEventListener('click', () => {
                if (item.currentType === 6) {
                  this.openVideo(item)
                } else {
                  this.handleClickCall(item)
                }
              })
          })
        }
      })
    },
    // 发起通话
    handleClickCall (data) {
      this.$bus.$emit('itemDataLoad', {
        toName: data.name,
        toNum: data.tel,
        callNum: ''
      })
    },
    openVideo (row) {
      this.$parent.handleOpenVideo(row)
      console.log('-------------------', this.$refs.videoDialog)
    },
    // 点标记图层改变
    handleViewChange (e) {
      //   console.log(e)
      this.chooseView.forEach((item, index) => {
        if (e.indexOf(item.label) != -1) {
          item.layer.addTo(this.map)
        } else {
          item.layer.removeFrom(this.map)
        }
      })
    },
    // 卫星地图和矢量地图切换
    changeMapType () {
      console.log('卫星地图和矢量地图切换')
      this.currentTdtType = this.getCurrentTdtType()
      //   console.log(this.currentTdtType)
      Object.keys(this.tdtType).forEach((v) => {
        if (this.currentTdtType === v) {
          this.tdtType[v].addTo(this.map)
          this.tdtType[v].setZIndex(98)
          // 如果是矢量地图的话将url也附加上
          if (this.currentTdtType == 'ver') {
            this.urlType.addTo(this.map)
            this.urlType.setZIndex(100)
          } else {
            this.lableType.addTo(this.map)
            this.lableType.setZIndex(100)
          }
        } else {
          this.map.removeLayer(this.tdtType[v])
          this.map.removeLayer(this.urlType)
        }
      })
    },
    // 获取下一个切换的地图类型返回字符串名 img、ver、ter
    getCurrentTdtType (type = 'English') {
      const typeCN = {
        img: '卫星',
        ver: '矢量'
        // ter: '地形'
      }
      let currentNum = Object.keys(this.tdtType).indexOf(this.currentTdtType)
      // 是否已经是最后一个
      currentNum = currentNum == Object.keys(this.tdtType).length - 1 ? 0 : ++currentNum
      if (type === 'English') {
        return Object.keys(this.tdtType)[currentNum]
      }
      if (type === 'Chinese') {
        return typeCN[Object.keys(this.tdtType)[currentNum]]
      }
    },
    // 地图打印
    webPrintingJobService () {
      const webPrintingJobContent = new SuperMap.WebPrintingJobContent({
        type: 'WEBMAP'
      })
      //   console.log(webPrintingJobContent)
      const webPrintingJobLayoutOptions = new SuperMap.WebPrintingJobLayoutOptions({
        templateName: 'A4_landscape', // 布局模板的名称。
        title: '地图主标题名称', // 地图主标题名称。
        subTitle: '地图副标题名称', // 地图副标题名称。
        author: '作者名称', // 作者名称。
        copyright: '版权信息', // 版权信息。
        littleMapOptions: new SuperMap.WebPrintingJobLittleMapOptions({
          center: this.currentLngLat
        }), // 小地图参数类。
        legendOptions: new SuperMap.WebPrintingJobLegendOptions({}) // 图例参数类。
      })
      //   console.log(webPrintingJobLayoutOptions)
      const webPrintingJobExportOptions = new SuperMap.WebPrintingJobExportOptions({
        format: 'PDF',
        scale: 10,
        dpi: 120,
        center: this.currentLngLat
      })
      const param = new SuperMap.WebPrintingJobParameters({
        content: webPrintingJobContent, // Web 打印的内容类。
        layoutOptions: webPrintingJobLayoutOptions, // Web 打印的布局类，包含各种布局元素的设置。
        exportOptions: webPrintingJobExportOptions // Web 打印的输出类，包含 DPI、页面大小等。
      })
      //   printingJobUrl: this.$BASE_URL'/iserver/services/webprinting/rest/webprinting/v1',
      const printingJob = new SuperMap.WebPrintingJobService(
        this.printingJobUrl
      ).createWebPrintingJob(param, (result) => {
        // doSomething
        console.log(result)
      })
    },
    // 最近的设施分析
    recentFacility () {
      console.log('最近的设施分析')
      L.geoJSON(recentFacilityMarker, {
        pointToLayer: (geoJsonPoint, latlng) => {
          console.log(geoJsonPoint, latlng)
          return L.marker(latlng, {
            title: geoJsonPoint.properties.name,
            icon: this.commonIcon
          })
        }
      }).addTo(this.map)

      // 创建最近设施分析参数实例
      const resultSetting = new SuperMap.TransportationAnalystResultSetting({
        returnEdgeFeatures: true,
        returnEdgeGeometry: true,
        returnEdgeIDs: true,
        returnNodeFeatures: true,
        returnNodeGeometry: true,
        returnNodeIDs: true,
        returnPathGuides: true,
        returnRoutes: true
      })
      const analystParameter = new SuperMap.TransportationAnalystParameter({
        resultSetting
        // turnWeightField: 'TurnCost',
        // weightFieldName: 'length' // length,time
      })
      const tempArray = recentFacilityMarker.features.map((v) => {
        const temp = v.geometry.coordinates
        return temp.reverse()
      })
      //   console.log(tempArray)

      const params = new SuperMap.FindClosestFacilitiesParameters({
        // 事件点,必设参数
        event: L.latLng(this.currentLngLat),
        // 要查找的设施点数量。默认值为1
        expectFacilityCount: 1,
        // 设施点集合,必设
        facilities: tempArray.map((v) => {
          return L.latLng(v)
        }),
        isAnalyzeById: false,
        parameter: analystParameter
      })
      //   console.log('params:', params)
      // http://{服务器地址}:{服务端口号}/iserver/services/{网络分析服务名}/rest/networkanalyst/{网络数据集@数据源}
      L.supermap
        .networkAnalystService(this.recentFacilityUrl)
        .findClosestFacilities(params, (res) => {
          //   console.log(res)
          const rersult = res.result
          rersult.facilityPathList.map((result) => {
            L.geoJSON(result.route).addTo(this.map)
          })
        })
    },
    // 最佳路径分析
    findPathParameters () {
      console.log('最佳路径分析')
      L.geoJSON(recentFacilityMarker, {
        pointToLayer: (geoJsonPoint, latlng) => {
          //   console.log(geoJsonPoint, latlng)
          return L.marker(latlng, {
            title: geoJsonPoint.properties.name,
            icon: this.commonIcon
          })
        }
      }).addTo(this.map)

      // 创建最近设施分析参数实例
      const resultSetting = new SuperMap.TransportationAnalystResultSetting({
        returnEdgeFeatures: true,
        returnEdgeGeometry: true,
        returnEdgeIDs: true,
        returnNodeFeatures: true,
        returnNodeGeometry: true,
        returnNodeIDs: true,
        returnPathGuides: true,
        returnRoutes: true
      })
      const analystParameter = new SuperMap.TransportationAnalystParameter({
        resultSetting
        // turnWeightField: 'TurnCost',
        // weightFieldName: 'length' // length,time
      })
      const tempArray = recentFacilityMarker.features.map((v) => {
        const temp = v.geometry.coordinates
        return temp.reverse()
      })
      //   console.log(tempArray)

      const params = new SuperMap.FindPathParameters({
        // 要查找的设施点数量。默认值为1
        expectFacilityCount: 1,
        // 设施点集合,必设
        nodes: [
          L.latLng(this.currentLngLat),
          ...tempArray.map((v) => {
            return L.latLng(v)
          })
        ],
        isAnalyzeById: false,
        parameter: analystParameter
      })
      //   console.log('params:', params)
      // http://{服务器地址}:{服务端口号}/iserver/services/{网络分析服务名}/rest/networkanalyst/{网络数据集@数据源}
      L.supermap.networkAnalystService(this.recentFacilityUrl).findPath(params, (res) => {
        //   console.log(res)
        const result = res.result
        result.pathList.map((result) => {
          L.geoJSON(result.route).addTo(this.map)
          L.geoJSON(result.pathGuideItems, {
            pointToLayer: (geoPoints, latlng) => {
              L.marker(latlng, { icon: this.commonIcon }).addTo(this.map)
            },
            filter: (geoJsonFeature) => {
              if (geoJsonFeature.geometry && geoJsonFeature.geometry.type === 'Point') {
                return true
              }
              return false
            }
          }).addTo(this.map)
        })
      })
    },
    // 缓冲区分析
    spatialAnalystService () {
      let a = this.$BASE_URL
      a = 'http://112.19.95.219:8004'
      // if (window.location.host.indexOf('112.19.95.219') > -1) {
      // // 判断是外网地址的话，就请求外网后端接口地址
      //
      // } else {
      // // 判断是内网地址的话，就请求内网后端接口地址
      //   a = 'http://172.16.2.2:8004'
      // }
      const serviceUrl = a + '/iserver/services/spatialAnalysis-peizhun/restjsr/spatialanalyst'
      const service = L.supermap.spatialAnalystService(serviceUrl)
      const params = new SuperMap.DatasetBufferAnalystParameters({
        dataset: '屏山县用地布L_adjust@peizhun',
        filterQueryParameter: new SuperMap.FilterParameter({
          attributeFilter: "Layer='KZ-控制指标'"
          // attributeFilter: 'Layer=\'规划边界\''
        }),
        bufferSetting: new SuperMap.BufferSetting({
          // endType: SuperMap.BufferEndType.ROUND,
          leftDistance: { value: 5 },
          rightDistance: { value: 5 }
          // semicircleLineSegment: 10
        })
      })
      //
      service.bufferAnalysis(params, (serviceResult) => {
        const result = serviceResult.result
        L.geoJSON(result.recordset.features, { color: 'red' }).addTo(this.map)
      })
    },
    // 叠加分析
    overlayAnalysis () {
      // 矢量图画圆形 半径300米
      this.overlayAnalysisData.circle = L.circle(this.currentLngLat, {
        radius: 800,
        fillColor: '#21ebff'
      })
        .bindTooltip(this.currentItem.eventArea)
        .openTooltip()
        .addTo(this.map)

      const { lat, lng } = this.getLonAndLat(this.currentLngLat[1], this.currentLngLat[0], 90, 800)
      const lnglat = [lat, lng]
      this.overlayAnalysisData.polyline = L.polyline([this.currentLngLat, lnglat], {
        color: '#3388ff',
        weight: 2,
        opacity: 0.8,
        dashArray: '15'
      }).addTo(this.map)
      this.overlayAnalysisData.popup = L.popup({
        closeOnClick: false,
        className: 'XXXXXX'
      })
        .setLatLng(lnglat)
        .setContent('800.00m')
        .openOn(this.map)
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.urlChange()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    window.openVideo = this.openVideo
    this.initSuperMap()
    // this.$bus.$on('setResource', (resourceList) => {
    //   console.log('加载资源坐标点', resourceList)
    //   this.setMarkerList(resourceList)
    // })
  }
}
</script>
<style lang="scss">
#mapView{
  position: absolute;
  height: 100vh;
  width: 100vw;

}
.leaflet-popup {
  background: url('../../../assets/image/home/tangc.png') no-repeat;
  background-size: 100% 100%;
  width: 290px;
  height: 240.5px;
  //background: linear-gradient(180deg, rgba(0, 4, 33, 0.9), rgba(0, 5, 36, 0.9) 00%) !important;
  //border-radius: 0.15rem !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background: transparent !important;
  color: #fff !important;
  border-radius: 0.15rem !important;
  box-shadow:none;
}

//.leaflet-popup-content-wrapper,
//.leaflet-popup-tip {
//  position: relative;
//  background: none;
//  box-shadow: none;
//}
.leaflet-popup-close-button {
  top: 20px !important;
  right: 10px !important;
}
.big-titile{
  font-family: YouSheBiaoTiHei;
  font-size: 20px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;
  color: #D4E8F8;
  text-shadow: 0px 0px 12px 0px rgba(50, 160, 244, 0.6);
}
.small-title{
  display: flex;
  width: 100%;
  align-items: center;
  margin: 16px 0;
  font-family: Source Han Sans CN;
  font-size: 16px;
  font-weight: normal;
  line-height: normal;
  letter-spacing: 0em;
  color: #D4E8F8;
  >span:nth-of-type(1){
    display: inline-block;
    width: 150px;
  }
}


//.popup_container {
//  position: absolute;
//  top: -2.5rem;
//  left: 50px;
//  font-size: 14px;
//  width: 3.75rem;
//  height: 2.5rem;
//  color: #fff;
//  background-image: url("~@/assets/image/supermap/popup.png");
//  background-size: 100% 100%;
//  > h1 {
//    display: flex;
//    justify-content: center;
//    padding: 14px 0 0 0;
//    font-size: 14px
//  }
//}

.leaflet-control-container {
  display: none;
}
</style>
